﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/css/yui-cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
    <script src="../assets/js/yui-source.js"></script>
	<title>SoundJS v1.0.0 API Documentation : AudioSprite</title>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><a href="http://createjs.site/soundjs"><img src="../assets/docs-icon-SoundJS.png" title="SoundJS"></a></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Documentation for: 1.0.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="AbstractPlugin.html">AbstractPlugin</a></li>
            
                <li><a href="AbstractSoundInstance.html">AbstractSoundInstance</a></li>
            
                <li><a href="AudioSprite.html">AudioSprite</a></li>
            
                <li><a href="CordovaAudioLoader.html">CordovaAudioLoader</a></li>
            
                <li><a href="CordovaAudioPlugin.html">CordovaAudioPlugin</a></li>
            
                <li><a href="CordovaAudioSoundInstance.html">CordovaAudioSoundInstance</a></li>
            
                <li><a href="ErrorEvent.html">ErrorEvent</a></li>
            
                <li><a href="Event.html">Event</a></li>
            
                <li><a href="EventDispatcher.html">EventDispatcher</a></li>
            
                <li><a href="FlashAudioLoader.html">FlashAudioLoader</a></li>
            
                <li><a href="FlashAudioPlugin.html">FlashAudioPlugin</a></li>
            
                <li><a href="FlashAudioSoundInstance.html">FlashAudioSoundInstance</a></li>
            
                <li><a href="HTMLAudioPlugin.html">HTMLAudioPlugin</a></li>
            
                <li><a href="HTMLAudioSoundInstance.html">HTMLAudioSoundInstance</a></li>
            
                <li><a href="HTMLAudioTagPool.html">HTMLAudioTagPool</a></li>
            
                <li><a href="PlayPropsConfig.html">PlayPropsConfig</a></li>
            
                <li><a href="Sound.html">Sound</a></li>
            
                <li><a href="SoundJS.html">SoundJS</a></li>
            
                <li><a href="Utility%20Methods.html">Utility Methods</a></li>
            
                <li><a href="WebAudioLoader.html">WebAudioLoader</a></li>
            
                <li><a href="WebAudioPlugin.html">WebAudioPlugin</a></li>
            
                <li><a href="WebAudioSoundInstance.html">WebAudioSoundInstance</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/CreateJS.html">CreateJS</a></li>
            
                <li><a href="../modules/SoundJS.html">SoundJS</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
            <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked="">
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>AudioSprite Class</h1>
<div class="box meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/soundjs_data_AudioSprite.js.html#l6"><code>AudioSprite:6</code></a>
        </div>
    

    
        
            Module: <a href="../modules/SoundJS.html">SoundJS</a>
        
    

    
        <p>Available since 0.6.0</p>
    
</div>



<div class="box intro">
    <p><strong>Note: AudioSprite is not a class, but its usage is easily lost in the documentation, so it has been called
out here for quick reference.</strong></p>
<p>Audio sprites are much like CSS sprites or image sprite sheets: multiple audio assets grouped into a single file.
Audio sprites work around limitations in certain browsers, where only a single sound can be loaded and played at a
time. We recommend at least 300ms of silence between audio clips to deal with HTML audio tag inaccuracy, and to prevent
accidentally playing bits of the neighbouring clips.</p>
<p><strong>Benefits of Audio Sprites:</strong></p>
<ul>
    <li>More robust support for older browsers and devices that only allow a single audio instance, such as iOS 5.</li>
    <li>They provide a work around for the Internet Explorer 9 audio tag limit, which restricts how many different
    sounds that could be loaded at once.</li>
    <li>Faster loading by only requiring a single network request for several sounds, especially on mobile devices
where the network round trip for each file can add significant latency.</li>
</ul>

<p><strong>Drawbacks of Audio Sprites</strong></p>
<ul>
    <li>No guarantee of smooth looping when using HTML or Flash audio. If you have a track that needs to loop
        smoothly and you are supporting non-web audio browsers, do not use audio sprites for that sound if you can avoid
        it.</li>
    <li>No guarantee that HTML audio will play back immediately, especially the first time. In some browsers
    (Chrome!), HTML audio will only load enough to play through at the current download speed – so we rely on the
    <code>canplaythrough</code> event to determine if the audio is loaded. Since audio sprites must jump ahead to play specific
    sounds, the audio may not yet have downloaded fully.</li>
    <li>Audio sprites share the same core source, so if you have a sprite with 5 sounds and are limited to 2
        concurrently playing instances, you can only play 2 of the sounds at the same time.</li>
</ul>

<h4>Example</h4>

<pre class="code prettyprint"><code>    createjs.Sound.initializeDefaultPlugins();
    var assetsPath = "./assets/";
    var sounds = [{
        src:"MyAudioSprite.ogg", data: {
            audioSprite: [
                {id:"sound1", startTime:0, duration:500},
                {id:"sound2", startTime:1000, duration:400},
                {id:"sound3", startTime:1700, duration: 1000}
            ]}
        }
    ];
    createjs.Sound.alternateExtensions = ["mp3"];
    createjs.Sound.on("fileload", loadSound);
    createjs.Sound.registerSounds(sounds, assetsPath);
    // after load is complete
    createjs.Sound.play("sound2");</code></pre>
<p>You can also create audio sprites on the fly by setting the startTime and duration when creating an new AbstractSoundInstance.</p>
<pre class="code prettyprint"><code>    createjs.Sound.play("MyAudioSprite", {startTime: 1000, duration: 400});</code></pre>
<p>The excellent CreateJS community has created a tool to create audio sprites, available at
<a href="https://github.com/tonistiigi/audiosprite" target="_blank"><a href="https://github.com/tonistiigi/audiosprite">https://github.com/tonistiigi/audiosprite</a>,
as well as a <a href="http://jsfiddle.net/bharat_battu/g8fFP/12/" target="_blank">jsfiddle</a> to convert the output
to SoundJS format.</p>

</div>



<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

        
        
        
        
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

            

            

            

            
        </div>

        

        

        

        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
